<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
<<<<<<< HEAD
    <title>可交互目录树</title>
    <style>
        .tree {
            list-style-type: none;
            padding-left: 20px;
        }
        .toggle {
            cursor: pointer;
            user-select: none;
        }
        .toggle::before {
            content: '▶ ';
            color: black;
            display: inline-block;
            margin-right: 6px;
        }
        .toggle.open::before {
            content: '▼ ';
        }
        .nested {
            display: none;
        }
        .nested.active {
            display: block;
=======
    <title>经济数据浏览器</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            display: flex;
        }
        #tree-container {
            width: 300px;
            padding: 20px;
            border-right: 1px solid #ccc;
        }
        #chart-container {
            flex: 1;
            padding: 20px;
        }
        .toggle {
            cursor: pointer;
            margin-right: 5px;
            user-select: none;
        }
        .selected {
            background-color: #e0f7fa;
            font-weight: bold;
        }
        ul {
            list-style: none;
            padding-left: 20px;
>>>>>>> 533f7799009471f747dcbcb228b17fdb90d2e485
        }
    </style>
</head>
<body>
<<<<<<< HEAD
    <ul id="tree" class="tree"></ul>
    <script>
        // 从 Flask 后端获取目录树数据
        fetch('http://127.0.0.1:5000/tree')
          .then(response => response.json())
          .then(data => {
                const treeContainer = document.getElementById('tree');
                buildTree(data, treeContainer);
            })
          .catch(error => console.error('获取数据出错:', error));

        // 递归构建目录树
        function buildTree(data, parentElement) {
            for (const key in data) {
                const listItem = document.createElement('li');
                const toggle = document.createElement('span');
                toggle.classList.add('toggle');
                toggle.textContent = key;

                listItem.appendChild(toggle);

                if (typeof data[key] === 'object') {
                    const nestedList = document.createElement('ul');
                    nestedList.classList.add('nested');
                    listItem.appendChild(nestedList);

                    if (Array.isArray(data[key])) {
                        data[key].forEach(item => {
                            const subListItem = document.createElement('li');
                            subListItem.textContent = item;
                            nestedList.appendChild(subListItem);
                        });
                    } else {
                        buildTree(data[key], nestedList);
                    }

                    toggle.addEventListener('click', function() {
                        this.classList.toggle('open');
                        const nested = this.parentElement.querySelector('.nested');
                        nested.classList.toggle('active');
                    });
                }

                parentElement.appendChild(listItem);
            }
        }
    </script>
=======
    <div id="tree-container"></div>
    <div id="chart-container"></div>
    <script src="app.js"></script>
>>>>>>> 533f7799009471f747dcbcb228b17fdb90d2e485
</body>
</html>